<template>
  <view
    class="coupon-box"
    :class="{ disabled: props.item.isCancel || props.item.isExpire || props.item.isUse || (props.select && !canSelect(props.item)) }"
    @tap="setSelect(props.item)"
  >
    <view class="left">
      <view>{{ props.item.discountValue }}{{ props.item.couponType == 1 ? '折' : '元' }}</view>
      <view class="min">{{ props.item.couponTypeName }}</view>
    </view>
    <view class="right">
      <view class="info">{{ getCouponName(props.item) }}</view>
      <view class="time">有效期至：{{ props.item.expireTime }}</view>
      <view class="time">{{ getCouponDesc(props.item) }}</view>
    </view>
    <c-radio v-if="props.select && canSelect(props.item)" size="mini" :checked="props.selectId == props.item.relId" class="usebtn" plain type="danger" />
    <view class="seal" v-if="props.item.isExpire">已过期</view>
    <view class="seal" v-if="props.item.isCancel">已作废</view>
    <view class="seal" v-if="props.item.isUse">已使用</view>
  </view>
</template>
<script setup>
import { View } from '@tarojs/components';
import { CRadio } from '@/components';

const props = defineProps({
  item: Object,
  select: Boolean,
  canUse: Array
});
const selectId = defineModel('selectId', String);
const canSelect = item => {
  return props.canUse.includes(item.relId);
};

const setSelect = item => {
  if (!props.canUse.includes(item.relId)) {
    return;
  }
  if (selectId.value == item.relId) {
    selectId.value = '';
  } else {
    selectId.value = item.relId;
  }
};
const getCouponName = item => {
  if (!item) return '-';
  if (item.couponType == 1) {
    if (item.threshold) {
      return `${item.discountValue}折券，满${item.threshold}可用`;
    }
    return `${item.discountValue}折券，无使用门槛`;
  } else {
    if (item.threshold) {
      return `${item.discountValue}元优惠券，满${item.threshold}元可用`;
    }
    return `${item.discountValue}元优惠券，无使用门槛`;
  }
};
const getCouponDesc = item => {
  if (item.useScope == 0) {
    return item.useScopeName;
  }
  return '部分' + item.useScopeName;
};
</script>
<style lang="scss">
.coupon-box {
  display: flex;
  position: relative;
  align-items: center;
  --color-coupon: var(--color-danger);
  width: 710px;
  margin: 0 auto 15px;
  background: #fff;
  border-radius: 16px;
  -webkit-mask-image: radial-gradient(circle at 200px 8px, transparent 8px, var(--color-warn) 9px),
    radial-gradient(closest-side circle at 50%, var(--color-warn) 99%, transparent 100%);
  -webkit-mask-size: 100%, 4px 8px;
  -webkit-mask-repeat: repeat, repeat-y;
  -webkit-mask-position: 0 -4px, 198px;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  background: linear-gradient(45deg, var(--color-warn), var(--color-coupon));

  &.disabled {
    filter: grayscale(1);
  }

  .seal {
    position: absolute;
    right: 10px;
    top: 10px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    color: var(--color-caption);
    align-items: center;
    justify-content: center;
    display: flex;
    border: 4px solid rgba(255, 255, 255, 0.6);

    font-size: 22px;
    transform: rotate(40deg);
  }
  .left {
    width: 200px;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    color: var(--color-caption);
    .min {
      font-size: 26px;
      margin-top: 10px;
      font-weight: normal;
    }
  }
  .usebtn {
    position: absolute;
    right: 0px;
    top: 10px;
    --color-primary: var(--color-caption);
  }
  .right {
    padding: 32px 24px;
    display: flex;
    flex: 1;
    flex-direction: column;
    color: var(--color-caption);
    .info {
      margin: 0;
      font-size: 28px;
      line-height: 40px;
    }
    .time {
      font-size: 23px;
      font-weight: normal;
      margin-top: 16px;
      color: var(--color-background);
    }
  }
}
</style>
